<template>
  <div class="dashboard-container">
    <div class="header">
      订单管理<i>{{ getday()[1] }}</i>
      <span><router-link to="order">订单明细</router-link></span>
    </div>
    <div class="box order">
      <div class="item">
        <span class="status"><i class="iconfont icon-waiting"></i>待接单</span>
        <span class="num tip"
          ><router-link to="/order?status=2">{{
            props.ordersData.waitingOrders
          }}</router-link></span
        >
      </div>
      <div class="item">
        <span class="status"><i class="iconfont icon-staySway"></i>待派送</span>
        <span class="num tip"
          ><router-link to="/order?status=3">{{
            props.ordersData.deliveredOrders
          }}</router-link></span
        >
      </div>
      <div class="item">
        <span class="status"><i class="iconfont icon-complete"></i>已完成</span>
        <span class="num"
          ><router-link to="/order?status=5">{{
            props.ordersData.completedOrders
          }}</router-link></span
        >
      </div>
      <div class="item">
        <span class="status"><i class="iconfont icon-cancel"></i>已取消</span>
        <span class="num"
          ><router-link to="/order?status=6">{{
            props.ordersData.cancelledOrders
          }}</router-link></span
        >
      </div>
      <div class="item">
        <span class="status"><i class="iconfont icon-all"></i>全部订单</span>
        <span class="num"
          ><router-link to="/order">{{
            props.ordersData.allOrders
          }}</router-link></span
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getday } from "@/utils/formValidate";
const props = defineProps({
  ordersData: {
    type: Object,
    default: {},
  },
});
</script>
<style scoped lang="scss">
.order {
  .item {
    padding: 20px;
    .num {
      float: right;
    }
  }
}
</style>
